<!-- 当前登陆的用户关注的用户的日记 -->
<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div class="per_diary" v-for="(item, index) in diaryList" :key="index">
        <div class="avatar">
          <van-image
            round
            width="3rem"
            height="3rem"
            :src="item.avatar"
            @click="toUserMainPage(item.userAid)"
          />
        </div>
        <div class="right_content">
          <div class="name_time_chat">
            <div class="name_time">
              <div class="name_user" @click="toUserMainPage(item.userAid)">
                {{ item.userName }}
              </div>
              <div class="diary_time">{{ item.time }}</div>
            </div>
            <div>
              <van-button
                round
                plain
                hairline
                type="primary"
                color="#78E4C4"
                size="mini"
                @click="toUserChatPage(item.userAid)"
              >
                &emsp;私聊&emsp;
              </van-button>
            </div>
          </div>
          <div class="content" @click="toDiaryDetailPage(item.diaryAid)">
            {{ item.content }}
          </div>
          <div class="image_list">
            <div
              class="per_image"
              v-for="(itemImage, indexImage) in item.imageList"
              :key="indexImage"
            >
              <van-image
                width="5.5rem"
                height="5.5rem"
                radius="5px"
                fit="fill"
                :src="itemImage"
                @click="clickPicEnlarge(item.imageList, indexImage)"
              />
            </div>
          </div>
          <div class="share_like_comment">
            <div @click="shareShow = true">
              <van-icon name="share-o" size="26px" />
            </div>
            <div class="like_comment">
              <div v-show="!item.isLike" @click="like(item.diaryAid)">
                <van-icon name="like-o" size="26px" />
                <span class="like_comment_style">&nbsp;点赞</span>
              </div>
              <div v-show="item.isLike" @click="nolike(item.diaryAid)">
                <van-icon name="like" color="#F43333" size="26px" />
                <span class="like_comment_style">&nbsp;点赞</span>
              </div>
              <div class="comment" @click="toDiaryDetailPage(item.diaryAid)">
                <van-icon name="chat-o" size="26px" />
                <span class="like_comment_style">&nbsp;评论</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>

    <br />
    <br />

    <!-- 分享面板 -->
    <van-share-sheet
      v-model:show="shareShow"
      title="立即分享给好友"
      :options="shareOptions"
      @select="goShare"
    />
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import {
  getCurrentUserConcernUserDiaryList,
  thumbsUpToDiary,
  cancelThumbsUpToDiary,
} from '../../api/diary.js'
export default {
  data() {
    return {
      diaryList: [], // 日记列表
      shareShow: false, // 控制分享面板的显示
      shareOptions: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ], // 分享面板里面的内容
      isLoading: false, // 控制下拉的显示
    }
  },
  created() {
    // 获取当前登陆这个用户关注的所有用户的所有日记列表
    this.getCurrentUserConcernUserDiaryListFunc()
  },
  methods: {
    // 获取当前登陆这个用户关注的所有用户的所有日记列表
    getCurrentUserConcernUserDiaryListFunc() {
      getCurrentUserConcernUserDiaryList().then((res) => {
        // console.log(res)
        this.diaryList = res.data.data
      })
    },

    // 点击图片放大
    clickPicEnlarge(imageList, index) {
      ImagePreview({
        images: imageList,
        startPosition: index,
      })
    },

    // 下拉刷新重新获取数据
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        this.getCurrentUserConcernUserDiaryListFunc();
      }, 1000)
    },

    // 点击分享
    goShare(options, index) {
      this.$toast({
        message: options.name,
        icon: options.icon,
        duration: 1000,
      })
      this.shareShow = false
    },

    // 点击头像或者用户名跳转到该用户的主页去
    toUserMainPage(userAid) {
      this.$router.push({
        path: '/userPersonalMainPage',
        query: {
          userAid,
        },
      })
    },

    // 点击评论或者点击日记的内容跳转到日记详情页面去
    toDiaryDetailPage(diaryAid) {
      this.$router.push({
        path: '/diaryDetail',
        query: {
          diaryAid,
        },
      })
    },

    // 点赞
    like(diaryAid) {
      thumbsUpToDiary(diaryAid).then(() => {
        this.getRecommentDiaryListFunc()
      })
    },

    // 取消点赞
    nolike(diaryAid) {
      cancelThumbsUpToDiary(diaryAid).then(() => {
        this.getRecommentDiaryListFunc()
      })
    },

    // 去私聊
    toUserChatPage(userAid) {
      this.$router.push({
        path: '/userChat',
        query: {
          userAid,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.per_diary {
  display: flex;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;
}
.name_time_chat {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.share_like_comment {
  // font-size: 20px;
  justify-content: space-between;
  display: flex;
}
.like_comment {
  display: flex;
}
.image_list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.per_image {
  margin-bottom: 10px;
  margin-right: 10px;
}
.name_user {
  font-size: 18px;
  letter-spacing: 2px;
  color: #303133;
}
.right_content {
  margin-left: 10px;
}
.diary_time {
  color: #909399;
  font-size: 15px;
}
.content {
  color: #606266;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.like_comment_style {
  color: #c0c4cc;
}
.comment {
  margin-left: 10px;
}
</style>
